<template>
	<view class="container">
		<statusBar />
		<tabbar :current="1"></tabbar>
		<!-- 搜索栏 end -->
		<view class="center">
			<view class="store">
				<view class="title">
					<image src="../../static/images/common/weizhi.png" class="left-icon" mode=""></image>

					<view @tap="Geographical" class="address">王家湾摩尔城B座806...</view>
					<image src="/static/images/common/black_arrow_right.png" class="right-icon"></image>
				</view>
				<!-- 外卖&自取 -->
				<view class="buttons">
					<button type="default" class="button" :class="{ active: orderType == 0 }" @tap="orderType = 0" plain hover-class="none">自取</button>
					<button type="default" class="button" :class="{ active: orderType == 1 }" @tap="orderType = 1" plain hover-class="none">外卖</button>
				</view>
				<!-- 外卖&自取-->
			</view>
			<view class="location">
				<image src="../../static/images/common/zhuanhuan.png" mode=""></image>
				<view>海天欢乐购店 配送</view>
			</view>
		</view>
		<!-- 滚动公告栏 -->
		<view class="notices">
			<swiper class="swiper" autoplay vertical :interval="3000" :duration="1000" circular>
				<swiper-item v-for="(item, index) in notices" :key="index">
					<view class="swiper-item">
						<image src="../../static/images/common/gongao.png" class="image"></image>
						<!-- <view class="iconfont icon-gonggao"></view> -->
						<view class="content">{{ item.content }}</view>
					</view>
				</swiper-item>
			</swiper>
			<image @tap="Open" class="image" src="../../static/images/common/icon-drop-down.png" mode=""></image>
		</view>

		<!-- 点单 -->
		<view class="recommended">
			<view><u-tabs active-color="#333333" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs></view>
			<!-- 搜索 -->
			<view>
				<view class="iconfont icon-sousuo1"></view>
				<view>搜索</view>
			</view>
		</view>
		<view class="main" v-if="current == 0">
			<!-- 左侧菜单 -->
			<scroll-view class="menu-bar" scroll-y scroll-with-animation>
				<view class="wrapper">
					<view
						class="menu-item"
						@tap="handleMenuSelected(category.id)"
						:class="{ active: currentCategoryId == category.id }"
						v-for="(category, index) in categories"
						:key="index"
					>
						<view class="title">{{ category.name }}</view>
						<image style="width: 50upx;height: 50upx;" :src="category.icon" mode=""></image>
					</view>
				</view>
			</scroll-view>

			<!-- 右侧商品列表全部加载-->
			<scroll-view v-if="Allloading == 0" @scrolltoupper="scrolltoupper" class="product-section" scroll-y scroll-with-animation :scroll-top="productsScrollTop" @scroll="productsScroll">
				<view class="wrapper" >
					<!-- 商品-->
				
						<view class="products-list" v-for="(category, index) in categories" :key="index" :id="`goods-${category.id}`">
							<view>{{ category.name }}</view> 
							<view class="products">
								<view class="product" v-for="(product, key) in category.goods" :key="key" @tap="showProductDetailModal(product)">
									
									<image :src="product.icon" mode="widthFix" class="image"></image>
									<view class="content">
										<view class="name">{{ product.name }}</view>
 
										<!-- <view class="description">{{ product.description }}</view> -->
									    <!-- <view class="description">222</view> -->
										<view class="price">
											<view>
												<view>月售{{product.salesNum}}</view>
												<view>￥{{ product.price }}</view>
												
											</view>
											<view>
												<actions
													:materialsBtn="product.is_single"
													@materials="showProductDetailModal(product)"
													:number="productCartNum(product.id)"
													@add="handleAddToCart(product)"
													@minus="handleMinusFromCart(product)"
												/>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</hr-pull-load>
				</view>
			</scroll-view>
			<!-- 右侧商品列表商品点击加载 -->
			<view class="product-section" scroll-y scroll-with-animation :scroll-top="productsScrollTop" @scroll="productsScroll" v-if="Allloading == 1">
				<view>
					<view>
						<v-tabs
							@change="changeTab"
							:pills="true"
							:tabs="tabs"
							:bold="false"
							pillsColor="#FFEFEA"
							activeColor="#FF5F2F"
							color="#333333"
							v-model="typeStatus"
						></v-tabs>
					</view>
				
					<view class="chooseRight" @tap="addChoose">
						<view>全部</view>
						<image class="chooseImg" src="../../static/images/common/icon-drop-down.png" mode=""></image>
					</view>
				</view>
				<!-- 展开全部老子又特么得来一次for循环 -->
				<view class="AccordingAll" v-show="Choose">
					<view class="allshow">
						<view>
							<view>选择分类</view>
							<image class="chooseImg" @tap="fanAdd" src="../../static/images/common/icon-drop-down.png" mode=""></image>
						</view>
						<view class="item-title" style="margin-top: 35upx;">
							<v-tabs
								@change="changeTab"
								:pills="true"
								:tabs="tabs"
								:bold="false"
								pillsColor="#FFEFEA"
								activeColor="#FF5F2F"
								color="#333333"
								v-model="typeStatus"
							></v-tabs>
						</view>
					</view>
				</view>
				<view class="wrapper" style="margin-left: -20upx;margin-top: 20upx;height: 65vh">
					<view class="products-list">
						<view class="products">
							<view class="product">
								<image src="../../static/images/common/naicha.png" mode="widthFix" class="image"></image>
								<view class="content">
									<view class="name">珍珠奶茶</view>

									<view class="description">香气迷人</view>
									<view class="price">
										<view>
											<view>月售221</view>
											<view>￥13</view>
										</view>
										<view>
											<!-- <actions
				  								:materialsBtn="product.is_single"
				  								@materials="showProductDetailModal(product)"
				  								:number="productCartNum(product.id)"
				  								@add="handleAddToCart(product)"
				  								@minus="handleMinusFromCart(product)"
				  							/> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商家推荐 -->
		<view v-if="current == 1" class="recomm">
			<view class="wrap"><u-swiper mode="rect" :list="listImage"></u-swiper></view>
			<!-- 商品列表for循环 -->
			<view class="goodsList">
				<view class="goodsTwo" v-for="i in 4">
					<image style="width: 100%;height: 344upx;" class="goodsImg" src="../../static/images/common/naicha.png" mode=""></image>

					<view>
						<view>杨枝甘露烧仙草(中杯...</view>
						<view class="Dairy">乳及大豆制品</view>
						<view class="plice">
							<view>￥10</view>
							<view>￥10</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商家地址 -->
		<view v-if="current == 2"><merchants></merchants></view>
		<!-- 商品详情 modal begin -->
		<!-- <product-modal :product="product" :visible="productModalVisible" @cancel="closeProductDetailModal" @add-to-cart="handleAddToCartInModal" /> -->
		<!-- 购物车栏 begin -->
		<!-- <cart-bar v-if="current == 0 || current == 1" :cart="cart" @add="handleAddToCart" @minus="handleMinusFromCart" @clear="clearCart" /> -->

		<!-- 优惠弹出层 -->
		<u-popup v-model="show" mode="bottom" border-radius="28" height="70%">
			<view class="nav">
				<view>云贝餐饮</view>
				<view>优惠券</view>
				<!-- 店铺红包 -->
				<view>
					<view>
						<view>
							<view>￥</view>
							<view>6</view>
						</view>
						<view>
							<view>店铺红包</view>
							<view>无门槛，2020.09.02到期</view>
						</view>
						<view>兑换</view>
					</view>
					<view>超级会员卡</view>
				</view>

				<!-- 2 -->
				<view>
					<view>
						<view>
							<view>￥</view>
							<view>6</view>
						</view>
						<view>
							<view>店铺红包</view>
							<view>无门槛，2020.09.02到期</view>
						</view>
						<view @tap="AddExchang" v-show="exchange">兑换</view>
						<view class="chang" v-show="exchangeTrue">已领取</view>
					</view>
					<!-- 已领取 -->
				</view>
				<!-- 优惠活动 -->
				<view class="Favourable">
					<view>优惠活动</view>

					<!-- 满减 -->
					<view class="reduction">
						<view>满减</view>
						<view>满30元减28元，满52元减44元，满78元减50元，满 100元减60元，满150元减80元</view>
					</view>
					<!-- 配送 -->
					<view class="reduction">
						<view>配送</view>
						<view>配送费立减3元</view>
					</view>

					<!-- 奖励 -->
					<view class="reduction">
						<view>奖励</view>
						<view>30天内下5单得￥5店铺红包</view>
					</view>
					<!-- 满赠 -->
					<view class="reduction">
						<view>满赠</view>
						<view>满1元赠送【5星好评返现2元】1份</view>
					</view>
				</view>

				<!-- 商家服务 -->
				<!-- <view class="Favourable">
					<view>商家服务</view>

					
					<view class="reduction">
						<view style="border: 1upx solid #DDDDDD; color: #666666;">食无忧</view>
						<view>该商户已购买食品安全责任险，食品安全有保障</view>
					</view>
					
					<view class="reduction">
						<view style="border: 1upx solid #DDDDDD; color: #666666;">开发票</view>
						<view>该商户支持开发票，请在下单时填写好发票抬头</view>
					</view>
				</view> -->
				<!-- 公告 -->
				<!-- <view class="announcement">
					<view>公告</view>
					<view>公告:每日首单免运费，0元起送，美如新鲜上架，多款买1送1， 如果产品有任何问题，一定要找我们哦，我们一定会处理到您满 意的，店长电话：18062706729</view>
				</view> -->
				<!-- 配送信息 -->
				<!-- <view class="announcement">
					<view>配送信息</view>
					<view>
						满20起送，支持到店自取；
						<br />
						由顺丰提供配送服务，距门店3km范围内起送，配送费用受天 气、时间等多方因素影响，已实际配送费为准
					</view>
				</view>
 -->
				<!-- 门店信息 -->
				<!-- <view class="Stores">
					<view>门店信息</view>
					<view>营业时间：24小时营业</view>
					<view>联系电话：15307193890</view>
					<view>
						<view>门店地址：</view>
						<view>洪山区珞狮路理工大孵化楼B座24楼（近维也纳酒店）</view>
						<view>
							<view><image src="../../static/images/common/daohang.png" mode=""></image></view>
							<view>到店</view>
						</view>
						<view><image src="../../static/images/common/dianhua.png" mode=""></image></view>
					</view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import Actions from './components/actions/actions.vue';
import CartBar from './components/cartbar/cartbar.vue';
import ProductModal from './components/product-modal/product-modal.vue';
import cartPopup from './components/cart-popup/cart-popup.vue';
import statusBar from '../../components/statusBar/statusBar.vue';
import tabbar from '../../components/tabbar.vue';
import merchants from './components/merchants/merchants.vue'; //商家地址
import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';
export default {
	components: {
		Actions,
		CartBar,
		ProductModal,
		cartPopup,
		statusBar,
		tabbar,
		merchants,
		hrPullLoad
	},
	data() {
		return {
			notices: [
				{ content: '多肉车厘回归，精选当季山东樱桃，颗颗手工去核，入茶清甜消暑，快来下单尝鲜吧~' },
				{ content: '太妃焦糖爆米花全新上市，焦香十足，美味易爆，快来「喜茶食验室」下单尝鲜吧~' }
			],
			orderType: 0, //自取自卖索引值
			categories: [],
			product: {},
			currentCategoryId: 0, //左侧id
			productsScrollTop: 0,
			cart: [],
			productModalVisible: false,
			list: [
				{
					name: '点单'
				},
				{
					name: '推荐'
				},
				{
					name: '商家'
				}
			],
			current: 0,
			show: false, //优惠弹出层
			exchange: true, //领取红包
			exchangeTrue: false,
			listImage: [
				{
					image: '../../static/images/common/shangpin.png'
				},
				{
					image: '../../static/images/common/shangpin.png'
				},
				{
					image: '../../static/images/common/shangpin.png'
				}
			], //商家轮播图
			Allloading: 0, //判断全部加载还是点击加载
			typeStatus: 0,
			tabs: ['酸奶系列', '仙草系列', '果茶系列', '果茶系列', '果茶系列'],
			bottomTips: '',
			currentPage: 1,
			Choose:false,//选择分类
		};
	},
	onShow() {
		console.log(this.cart, 999999999);
	},
	created() {
		
		this.handleMenuSelected(2)
	},
	mounted() {
		console.log(this.MAP,888888)
		setTimeout(()=>{
			this.handleMenuSelected(2)
		},3000)
	},
	methods: {
		// 接口对接
		OrderTo(){
			let that = this
			uni.showLoading({
			    title: '加载中'
			});
			request('/channelApi/good/get-product-list', 'GET', {
						lng:that.positioning,
						lat:that.MAP
						}).then(res => {
							console.log(JSON.parse(res.data).data, 222);
							var data = JSON.parse(res.data)
							if (data.code === 1) {
								uni.hideLoading() 
								that.categories = data.data.data
								
								console.log(data.data,33)
							}
							
						});
		},
		scrolltoupper(){
			console.log(1111999)
		},
		// 展开全部
		addChoose(){
			this.Choose = true
		},
		// 关闭全部
		fanAdd(){
			this.Choose = false
			
		},
		// 跳转百度地图
		Geographical() {
			uni.navigateTo({
				url: '/pages/Order/Map'
			});
		},
		// 推荐
		change(index) {
			this.current = index;
		},
		// 点击自取自卖
		switchOrderType(index) {
			this.orderType = index;
		},
		// 优惠券
		Open() {
			this.show = true;
		},
		// 点击领取红包
		AddExchang() {
			this.exchangeTrue = true;
			this.exchange = false;
		},
		// 点击右侧奶茶品种
		showProductDetailModal(product) {
			this.product = product;
			console.log(this.product, 888);
			this.productModalVisible = true;
		},
		changeTab(index) {
			console.log('当前选中索引：' + index);
		},
		closeProductDetailModal() {
			this.productModalVisible = false;
			this.product = {};
		},
		handleAddToCartInModal(product) {
			this.handleAddToCart(product);
			this.closeProductDetailModal();
		},
		// 左侧栏传值id
		handleMenuSelected(id) {
			this.productsScrollTop = this.categories.find(item => item.id == id).top;
			console.log(this.productsScrollTop, 11);
			this.currentCategoryId = id; //左侧栏传值id
			console.log(this.currentCategoryId, 99999999999);
			this.$nextTick(() => (this.currentCategoryId = id));
		},
		productsScroll({ detail }) {
			const { scrollTop } = detail;
			let tabs = this.categories.filter(item => item.top <= scrollTop).reverse();
			if (tabs.length > 0) {
				this.currentCategoryId = tabs[0].id;
			}
		},
		//从购物车减商品
		handleMinusFromCart(product) {
			let index;
			if (product.is_single) {
				index = this.cart.findIndex(item => item.id == product.id);
			} else {
				index = this.cart.findIndex(item => item.id == product.id && item.materials_text == product.materials_text);
			}
			this.cart[index].number -= 1;
			if (this.cart[index].number <= 0) {
				this.cart.splice(index, 1);
			}
			console.log(product, 1223);
		},
		// 清空购物车
		clearCart() {
			this.cart = [];
		},
		//添加到购物车
		handleAddToCart(product) {
			const index = this.cart.findIndex(item => {
				if (!product.is_single) {
					return item.id == product.id && item.materials_text == product.materials_text;
				} else {
					return item.id === product.id;
				}
			});
			console.log(product, 189);
			if (index > -1) {
				this.cart[index].number += product.number || 1;
				return;
			}

			this.cart.push({
				id: product.id,
				cate_id: product.category_id,
				name: product.name,
				price: product.price,
				number: product.number || 1,
				image: product.images[0].url,
				is_single: product.is_single,
				materials_text: product.materials_text || ''
			});
			this.$store.commit('user/Shopping', this.cart);
			console.log(this.cart, 8888888888);
		},

		calcSize() {
			var h = 0;
			this.categories.forEach(item => {
				var view = uni.createSelectorQuery().select(`#goods-${item.id}`);
				view.fields(
					{
						size: true
					},
					data => {
						item.top = h;
						h += Math.floor(data.height);
						item.bottom = h;
					}
				).exec();
			});
		}
	},
	computed: {
		...mapState(['Shopping']),
		...mapState(['MAP']),
		...mapState(['positioning']),
		//计算单个饮品添加到购物车的数量
		productCartNum() {
			return id =>
				this.cart.reduce((acc, cur) => {
					if (cur.id === id) {
						return (acc += cur.number);
					}
					return acc;
				}, 0);
		}
	},
	async onLoad(options) {
		
		this.categories = await this.OrderTo();
		this.currentCategoryId = this.categories.length && this.categories[0].id;
		console.log(this.currentCategoryId, 22);
		if (this.Allloading == 0) {
			this.$nextTick(function() {
				this.calcSize();
			});
		}
	}
};
</script>

<style lang="scss">
@import './index.scss';
</style>
